


<template>
  <view class="container">

    <view class='newHouseTitle'>
      当前位置
    </view>

    <view class="map_wrap">
      <map id="map" :latitude="t_lat" :longitude="t_lng" scale="15" :markers="markers" class="map_map" bindtap="show_big_map"></map>
      <view class="xmwzB flex tfAlignC flexSb">
        <view class="xmwzBLi"  :dataIndex='index' @tap='xmwzB_click(index)' v-for='(item, index) in tabs' :key='index'>
          <image class="img" :src="index!=xmwzB_index?item.ico:item.ico_active"></image>
          {{item.name}}
        </view>
      </view>

      <view class="xmwzUl" v-if='arrlist_cur&&arrlist_cur.length'>
        <view class="xmwzUl-li flex flexSb tfAlignC" v-for='(item, index) in arrlist_cur' :key='index' >
          <view class="xmwzUl-li-name tfLine1" style="max-width:500rpx;">{{item.title}}</view>
          <view class="xmwzUl-li-add">{{item.distance}}m</view>
        </view>
      </view>

    </view>

  </view>
</template>

<script>
//var QQMapWX = require('../../common/qqmap-wx-jssdk.min.js');
import QQMapWX  from '@/common/qqmap-wx-jssdk.min.js'
var qqmapsdk;
qqmapsdk = new QQMapWX ({
  key: 'SASBZ-QMALS-NUKOI-6W6SQ-SCLBE-CVFSC'
});

	export default {
		data() {
			return {
        // 获取的经纬度
        t_lat: 30.818526,
        t_lng: 106.078234,
        // 地图的markers
        markers: [],
        // 当前选中第几个
        xmwzB_index: 0,
        // tab列表
        tabs: [{
          ico: '../../static/img/person.png',
          ico_active: '../../static/img/person.png',
          name: '交通'
        },
          {
            ico: '../../static/img/person.png',
            ico_active: '../../static/img/person.png',
            name: '学校'
          },
          {
            ico: '../../static/img/person.png',
            ico_active: '../../static/img/person.png',
            name: '医疗'
          },
          {
            ico: '../../static/img/person.png',
            ico_active: '../../static/img/person.png',
            name: '购物'
          },
          {
            ico: '../../static/img/person.png',
            ico_active: '../../static/img/person.png',
            name: '餐饮'
          },
        ],
        // 把从腾讯地图SDK获取的位置存起来，以后每次点击就不用请求了。
        arrlist:[[],[],[],[],[]],
        arrlist_cur:'',
			}
		},

    onLoad(){
      var that = this;
      var marks = [];
      // 地图上的icon图标
     
      // 改写气泡
      marks.push({ // 获取返回结果，放到mks数组中
        title: '想要展示的名字',
        latitude: that.t_lat,
        longitude: that.t_lng,
        iconPath: './static/images/gps.png', //图标路径
        width: 20,
        height: 20,
        address: '详细地址',
        callout: {
          content: '想要展示的名字',
          color: '#fff',
          bgColor: '#3072f6',
          fontSize: 14,
          padding: 10,
          borderRadius: 10,
          display: 'ALWAYS'}
      });
    },



		methods: {
      // 点击tab切换
      xmwzB_click(index) {
        var that = this;
        //var index = e.currentTarget.dataset.index;

        that.xmwzB_index = index;
        var name = that.tabs[index].name;
        that.nearby_search(name);

       /* that.setData({
          xmwzB_index: index
        }, () => {
          var name = that.data.tabs[index].name;
          that.nearby_search(name);
        });*/
      },
      // 通过关键字调用地图SDK，搜索获取结果列表
      nearby_search(key) {
        var that = this;
        var xmwzB_index = that.xmwzB_index;
        var list_c = that.arrlist[xmwzB_index];
        // 判断是否请求过了，如果没请求过则请求；请求过了就直接赋值
        if(list_c.length){
          /*that.setData({
            arrlist_cur:list_c
          });*/

          that.arrlist_cur = list_c
        }else{
        
          qqmapsdk.search({
            keyword: key, // 搜索关键词
            page_size: 5, // 一页展示几个
            location: that.t_lat + ',' + that.t_lng, //设置周边搜索中心点
            success: function (res) { //搜索成功后的回调
              wx.hideToast({});
              var arrlist = [];
              // 对获取的信息进行处理，整理出需要的字段
              // 有些可能会涉及位置跳转（需要经纬度）；展示位置名（详细参数设置参考官网说明）
              for (var i = 0; i < res.data.length; i++) {
                arrlist.push({ // 获取返回结果，放到mks数组中
                  title: res.data[i].title,
                  latitude: res.data[i].location.lat,
                  longitude: res.data[i].location.lng,
                  distance: res.data[i]._distance,
                })
              }
              // 每次不用重新赋值，通过下标给需要的赋值
              var arrlist_key = 'arrlist['+xmwzB_index+']';
              /*that.setData({
                [arrlist_key]: arrlist,
                arrlist_cur:arrlist
              });*/
              //that.arrlist_key = arrlist;
              that.arrlist_cur = arrlist;
            },
            fail: function (res) {
              console.log(res);
            },
            complete: function (res) {
              //console.log(res.data);
            }
          });
        }
      },
      // 小程序地图api，跳转大地图
      show_big_map: function () {
        var that = this;
        wx.openLocation({
          latitude: parseFloat(that.data.t_lat), // 纬度，浮点数，范围为90 ~ -90
          longitude: parseFloat(that.data.t_lng), // 经度，浮点数，范围为180 ~ -180。
          name: '想要展示的名字', // 位置名
          address: '详细地址', // 地址详情说明
          scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
        });
      }

		}
	}
</script>

<style>
/*弹性布局*/
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  display: box;
  flex-wrap:wrap;
}
.noWarp{
  flex-wrap:nowrap;
}
/*元素居中*/
.alignC{
  align-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
}
/*水平排列*/
.flexH{
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
}
/*垂直排列*/
.flexV {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
/*两端对齐*/
.flexSa {
  -webkit-box-pack: justify;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -o-justify-content: space-around;
}
/*居中对齐*/
.flexC {
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
}
.flexSb {
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
}
.flexS {
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
}
.flexE {
  -webkit-box-pack: end;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  -o-justify-content: flex-end;
}

.tfLine1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 页面内容 */
.container{
  padding: 0 25rpx;
}

.newHouseTitle {
  height: 100rpx;
  line-height: 100rpx;
  font-size: 35rpx;
  font-weight: bold;
}

.map_map{
  width: 100%;
  height:600rpx;
}

.xmwz{
  padding: 0 35rpx;
}

.xmwzT{
  width: 100%;
  height: 300rpx;
}

.xmwzB{
  margin-top: 25rpx;
}

.xmwzBLi{
  background-size:48rpx 48rpx;
  background-repeat: no-repeat;
  background-position:top center;
  padding-top: 72rpx;
  text-align: center;
  font-size: 30rpx;
  color: #333333;
  padding-bottom: 30rpx;
  position: relative;
}

.xmwzBLi:before{
  position: absolute;
  width: 100%;
  height: 10rpx;
  background-color: transparent;
  left: 0;
  bottom: 0;
  display: block;
  content:'';
}

.xmwzBLi.on::before{
  background-color: #3072f6;
}

.xmwzBLi .img{
  position: absolute;
  left: 50%;
  top: 5rpx;
  margin-left: -24rpx;
  width: 48rpx;
  height: 48rpx;

}

.xmwzUl{
  padding: 15rpx 0 50rpx;
}

.xmwzUl-li{
  height: 60rpx;
  line-height: 60rpx;
}

.xmwzUl-li-name{
  font-size: 30rpx;
  color: #666666;
}

.xmwzUl-li-add{
  background-image: url();
  background-size:24rpx 30rpx;
  background-repeat: no-repeat;
  background-position: left center;
  padding-left:36rpx;
  font-size: 30rpx;
  color: #aaaaaa;
}
</style>
